import React, { Component } from 'react'
import ReactDOM from 'react-dom'

export default class App extends Component {
  state = {
   username: 'xxx',
   content:''
  }
 
  HandleInput = (e) =>{
    this.setState({
      username:e.target.value
    })
  }
  HandleTextArea = (e) =>{
    this.setState({
      content:e.target.value
    })
  }
  render () {
    return (
      <ul>
        <li>
          <label hemlfor='username'>用户名</label>
          <input id='username' type='text' value={this.state.username} onChange={this.HandleInput}></input>
        </li>
        <li>
          <label hemlfor='content'>其他信息</label>
          <textarea id='content' type='text' value={this.state.content} onChange={this.HandleTextArea}
          cols='30'
          rows='10'
          ></textarea>
        </li>
      </ul>
    )
  }
}

ReactDOM.render(<App />, document.querySelector('#react'))